<?php 
namespace Gigasweb\Wordpress\Metabox;

class MapEditor {
	private $_Coord;
	private $_Name;
	
	public function __construct( $name, $coord = array() ){
		$this->_Coord = $coord;
		$this->_Name = $name;
	}	
	
	public function Render() {
		?>
		<div>
		<img src="<?php bloginfo('template_url'); ?>/images/marker_sprite.png" /> Positiona il marker sulla mappa
		</div>
		<div style="margin-top: 20px;">
			<input id="search_map" style="width: 300px;" placeholder="Ricerca..." />
			<a id="search_map_button" href="#" class="button" onClick="">Cerca</a>
			<img src="<?php bloginfo('url'); ?>/wp-admin/images/wpspin_light.gif" class="ajax-loading" id="map-loading" alt="" style="visibility: hidden; vertical-align: middle;">
		</div>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			var geocoder,map, marker,addressField;
			jQuery(document).ready(function($) {
				function initialize() {
					addressField = $('#search_map');
					geocoder = new google.maps.Geocoder();
					var latlng = new google.maps.LatLng(<?php echo $this->_Coord['lat'] ? $this->_Coord['lat'] : '0'; ?>,<?php echo $this->_Coord['lng'] ? $this->_Coord['lng'] : '0'; ?>);
					var myOptions = {
						zoom: <?php echo $this->_Coord['zoom']; ?>,
						center: latlng,
						mapTypeId: google.maps.MapTypeId.ROADMAP,
						mapTypeControl: false,
						streetViewControl: false
					};
					map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
					marker = new google.maps.Marker({
						map: map,
						position: latlng,
						draggable: true
					});
					
					google.maps.event.addListener(map, 'click', function(event) {
			            marker.setPosition(event.latLng);
			            updatePosition(event.latLng);
			        });
					
					google.maps.event.addListener(marker, 'dragend', function(a) {
					    updatePosition(a.latLng);
					});

					google.maps.event.addListener(map, 'zoom_changed', function() {
				        zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
				        	jQuery('#map_coord_zoom').val(this.getZoom());

				            google.maps.event.removeListener(zoomChangeBoundsListener);
				        });
					});
				}
	
				initialize();

				jQuery('#search_map').keydown(function(event){
					if(event.keyCode == 13) {
				      event.preventDefault();
				      search();
				      return false;
				    }
				});

				jQuery('#search_map_button').click(function(ev){
					ev.preventDefault();
					search();
					return false;
				});
			});
			
			function updatePosition(latLng) {
				jQuery('#map_coord_lat').val(latLng.lat());
				jQuery('#map_coord_lng').val(latLng.lng());
			}

			
			
			
			function search() {
				jQuery('#map-loading').css('visibility', 'visible');
			    geocoder.geocode(
			        {'address': addressField.val()}, 
			        function(results, status) { 
			            if (status == google.maps.GeocoderStatus.OK) { 
			                var loc = results[0].geometry.location;
			                // use loc.lat(), loc.lng()
			                map.setCenter(loc);
			                map.setZoom(14);
			                marker.setPosition(loc);
			                jQuery('#search_map').val(results[0].formatted_address);
			                updatePosition(loc);
			            } 
			            else {
			                alert("Not found: " + status); 
			            }
			            jQuery('#map-loading').css('visibility', 'hidden'); 
			        }
			    );
			    return false;
			}
		</script>
		<div id="wrapper-map"><div id="map_canvas" style="height: 342px;margin-top: 10px;"></div></div>
		<input type="hidden" id="map_coord_lat" name="<?php echo $this->_Name; ?>[lat]" value="<?php echo $this->_Coord['lat']; ?>" />
		<input type="hidden" id="map_coord_lng" name="<?php echo $this->_Name; ?>[lng]" value="<?php echo $this->_Coord['lng']; ?>" />
		<input type="hidden" id="map_coord_zoom" name="<?php echo $this->_Name; ?>[zoom]" value="<?php echo $this->_Coord['zoom']; ?>" />
		<?php
	}
}